<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>

<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>上传视频
                </label>
                <button type="button" class="layui-btn" id="video_btn">上传</button>
                <div class="layui-upload-list" style="display: none;margin-left: 110px;">
                    <video controls class="layui-upload-img" id="video" name="url" style="width: 200px;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="名称" required="required" lay-verify="required"
                        autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>集数
                </label>
                <div class="layui-input-block">
                    <input type="number" name="sort" id="sort" placeholder="集数" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label w-auto">
                    是否需要会员
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="is_members" lay-filter="*" value="0" title="否" checked>
                    <input type="radio" name="is_members" lay-filter="*" value="1" title="是">
                </div>
            </div>
            <div class="layui-form-item" id="pay_amountShow" style="display: none;">
                <label class="layui-form-label w-auto">
                    支付K币
                </label>
                <div class="layui-input-block">
                    <input type="number" name="pay_amount" placeholder="支付K币" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    点赞数
                </label>
                <div class="layui-input-block">
                    <input type="number" name="give_count" id="give_count" placeholder="数量" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    分享数
                </label>
                <div class="layui-input-block">
                    <input type="number" name="share_count" id="share_count" placeholder="数量" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>

            <input type="hidden" class="layui-input" name="url">
            <input type="hidden" name="video_id" id="video_id"  />
            <input type="hidden" name="id" id="id"  />

            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />
        </form>
    </div>
    <script>
        let params = {
            addUrl: '/admin/videoDetail/add',
            editUrl: '/admin/videoDetail/edit',
            detailUrl: '/admin/videoDetail/detail',
        }
        form_ajax(params)

        layui.use(['laydate','form'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            //日期范围
            laydate.render({
                elem: '#hztime'
                , range: ['#startDate', '#endDate']
                , format: 'yyyy-MM-dd'
            });
            form.on('radio(*)', function(data){
                if(data.value == 1){
                    $('#pay_amountShow').show()
                }else{
                    $('#pay_amountShow').hide()
                }
            });
        })
       
        uploadFile({
            elem: '#video_btn', 
            ossUrl:'/admin/videoDetail/uploadCredentials',
            multiple:true,
            accept:"video",
            acceptMime:'video/*',
            uploadSuccessCallback: function (res,fileName) {
                $('.layui-upload-list').show()
                $("input[name='url']").val(res.url);
                $('#video').attr('src', res.url);
                // $('.layui-upload-list').append(`
                //     <video controls class="layui-upload-img" name="url" style="width: 200px;" src=${res.url} >
                // `)   
            }, 
            uploadErrorCallback: function() {
                return layer.msg('上传失败');
            },
        })

        let video_id = GetQueryString('video_id')
        let id = GetQueryString('id')
        $('#video_id').val(video_id)
        if (id) {
            Ajax(params.detailUrl, { id }).then(result => {
                if(result.data.url){
                    $('.layui-upload-list').show()
                    $('#video').attr('src', result.data.url);
                }
                if(result.data.is_members == 1){
                    $('#pay_amountShow').show()
                }
            });
        }
    </script>
</body>

</html>